블로그의 SEO 점수를 챙겨보자
Feb 28, 2024
SEO
블로그라 함은 검색어 노출 빈도를 신경 써야 하는 법! 구현에만 집중해 놓쳤던 SEO 점수를 살뜰히 챙겨보자.
SEO 점수를 높이기 전에 점수를 확인해 보았다. 내가 확인한 SEO 체커는 seobility다. 대부분 체커가 SEO 기준이 비슷하다고 하여 가장 상위에 보이는 서비스로 사용했다.
제 점수는요,,
두둥! 52점이 나왔다😅 고려하지 못한 만큼 아쉬운 점수다. 점수와 함께 검색 엔진 최적화를 위해 개선해야 하는 체크 리스트를 알려 준다. 무려 10가지나 됐다. Very Important 태그가 달린 다섯 개의 문제점을 하나씩 개선해 보자.
링크 수가 적은 것도 SEO에 악영향을 미친다?
This page has only very few internal links. If it’s a welcome page, consider removing it.
문장 그대로 읽으면 내부 링크 부족이 문제가 된다는 것을 알 수 있다. 현재 글이 없기도 해서 내부에 존재하는 링크가 거의 없다 .. 정보가 부족하니 검색 엔진이 웹 사이트를 이해하는 것이 어렵고, 사용자 또한 다양한 콘텐츠를 통해 유입되는 것이 어렵다.
요 부분은 글이 적은 것이 가장 큰 문제라고 생각이 들어 더 많은 정보를 제공할 수 있는 개발 블로그가 되도록 어서 글을 쌓아야겠다는 생각이 들었다.😅
h1 태그 추가하기
Add a H1 heading to this page.
이전 경험에 의하면 웹 접근성을 고려하여 <h1> 태그가 구조상 필요하지 않은 경우에도 스타일을 통해 태그를 숨기고 작성했었다. 스타일을 해치지 않으면서도 스크린 리더에 제대로 인식될 수 있는 방법이라 사용했었다.
현재 블로그 메인 페이지도 구조에 <h1> 태그가 크게 필요하지 않은데, 위 방식으로도 SEO 점수를 높일 수 있을지 궁금했다.
google 검색 센터에 따르면 검색 해당 방식은 SEO에 긍정적인 영향을 미치지 못한다. 구글 검색 엔진은 보이는 화면을 통해서도 페이지를 해석하기 때문에 페이지가 실제로 다루고자 하는 내용과 보이는 것이 해야 한다고 한다.(참고자료)
나는 SEO가 중요한 기술 블로그인 만큼, 스타일 구조를 변경해서 <h1> 태그를 작성하도록 수정했다. 추가로 접근성과 SEO 측면에서 <h1> 태그는 페이지 당 하나만 존재해야 유리한데, 이전 글 작성시에 컨텐츠 내에서 <h1> 태그를 무지성 남발했었다..ㅎㅎ 이번 기회에 해당 케이스를 고려하여 글을 작성해야겠다고 생각했다.
www, non-www 통일하기
Use 301 redirects to drive traffic to URLS with the same domain and sub domain (www and non-www subdomain)
이 문제는 www와 non-www를 혼용해서 사용하는 경우에 발생한다. 두 가지 중 무엇을 선택하는지 보다 하나를 선택하여 통일하는 것이 더 중요하다. 표준 주소를 정하게 되면 일관된 주소로 redirection 할 수 있고 이는 일관된 도메인 구조를 선호하는 검색 엔진에게 긍정적인 영향을 미친다.
👉🏻 link rel="canonical"
페이지의 표준 주소가 무엇인지 지정할 수 있는 속성이다. 사용자는 해당 태그 유무에 대한 차이를 느낄 수 없지만 검색 엔진은 페이지의 실제(표준) 위치를 알려준다. 그렇게 되면 페이지는 동일한 두 가지 페이지를 스캔하지 않아 중복, 스팸의 위험성이 낮아지고 검색 결과에 부정적인 영향을 미칠 가능성도 낮출 수 있다.
Gatsby에서 지원하는 gatsby-plugin-canonical-urls 플러그인은 자동으로 해당 태그를 삽입해 주어 문제를 간단하게 해결할 수 있다!
head 태그는 필수!
Add meta description.
Add title to your site.
<head> 태그 내부에 작성되는 title, meta 등을 작성하여 웹사이트에 대한 대략적인 정보를 제공할 수 있다. 해당 작업을 위해 이전부터 자주 볼 수 있었던 react-helmet 을 사용하여 태그를 작성하려 했는데, 너무 오랫동안 develop 되지 않고 있어 고민이 됐다. 그래서 대안책을 찾다 Gatsby에서 제공하는 Head API를 발견했다.
👉🏻 Gatsby Head API
4.19.0 버전부터 사용할 수 있는데 페이지별로 동적으로
태그를 커스텀 할 수 있도록 지원한다. 공식 문서에 따르면Compared to react-helmet or other similar solutions, Gatsby Head is easier to use, more performant, has a smaller bundle size, and supports the latest React features.
react-helmet, 그 외의 유사한 해결법보다도 더 쉽게 사용 가능하며, 더 작은 번들 사이즈로 나은 퍼포먼스를 제공한다고 한다. 또 리액트 최신 기능 지원도 가능하다.
공식 문서에서 이야기한 대로 사용법은 단순하다.
const Page = () => <div>Hello world!</div>
export default Page
export const Head = () => <title>Hello World Page</title>페이지를 내보내는 파일에서 Head 컴포넌트를 함께 내보내주면 된다! 라이브러리를 설치하지 않아도 되고, 페이지 단에서 쉽게 내보낼 수 있어서 사용하기 편했다.
title, description뿐 아니라 og 정보도 추가하여 링크 전송에 대한 대응까지 완료했다!
이제 링크 전송 시에도 귀여운 숀과 함께 페이지에 대한 정보를 얻을 수 있다. 추가로 배포 페이지보다 추가로 새로운 도메인에서는 적용이 조금 늦게 이루어졌다. 천천히 기다리면 잘 적용된다!
진짜_마지막_최종_SEO_점수.png
100점을 달성했다 ! 🎉🎉🎉
이전에 검사한 seobility에서 검사하고 싶었지만 테스트 횟수가 제한되어 있어서 개선 후에는 PageSpeed를 사 용해서 체크했다! 접근성의 주황빛이 아쉽긴 하지만 SEO 점수는 낭낭하게 챙겨 받았다.
마치며
온전한 나의 서비스를 만든다는 것은 생각보다 애정이 크게 가는 것 같다. 블로그를 구현하면서 더 깊은 공부를 하고, 이전에 해보지 못했던 고민들을 하는 것 같아서 즐거움을 느낀다. 계속해서 새로운 기능과, 성능을 개선하며 배워나갈 것이다.
이 개선으로 내가 작성한 글이 누군가에게 잘 보여 도움이 되길 바란다..! ☺️